<!DOCTYPE html>
<html>
<head>
    <title>vue.js 简单多图上传图片</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">

        ul { list-style: none outside none; margin:0; padding: 0; }
        li { margin: 0 10px; display: inline; }
        #app{
            overflow: hidden;
            text-align: center;
            margin-top: 10%;
        }
        img {
            width: 100px;
            height: 100px;
            margin: auto;
            display: inline;
            margin-bottom: 10px;
        }
    </style>
    <script src="//cdn.bootcss.com/vue/1.0.23/vue.min.js"></script>
    <script src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
    <div style="margin-bottom: 20px">
        <h2>选择图片</h2>
        <a id='addPic' href="" v-on:click="addPic">添加图片 </a>
        <input type="file" @change="onFileChange" multiple style="display: none;">
    </div>
    <div v-if="images.length >0">
        <ul>
            <li v-for="(key,image) in images">

                <img :src="image" @click='delImage(key)' />
                <a href="#" style="position: absolute;" @click='delImage(key)'>
                    <span class="glyphicon glyphicon-remove"></span>
                </a>
            </li>
        </ul>
        <button @click="removeImage">移除全部图片</button>
        <button @click='uploadImage' >上传</button>
    </div>
</div>
<script type="text/javascript">
    Vue.config.debug = true;// 开启vue 调试功能
    new Vue({
        el: '#app',
        data: {
            images: []
        },
        methods: {
            addPic(e){
                e.preventDefault();
                $('input[type=file]').trigger('click');
                return false;
            },
            onFileChange(e) {
                var files = e.target.files || e.dataTransfer.files;
                if (!files.length){return};
                this.createImage(files);
            },
            createImage(file) {
                if(typeof FileReader==='undefined'){
                    alert('您的浏览器不支持图片上传，请升级您的浏览器');
                    return false;
                }
                var image = new Image();
                var vm = this;
                var leng=file.length;
                for(var i=0;i<leng;i++){
                    var reader = new FileReader();
                    reader.readAsDataURL(file[i]);
                    reader.onload =function(e){
                        vm.images.push(e.target.result);
                    };
                }
            },
            delImage:function(index){
                this.images.shift(index);
            },
            removeImage: function(e) {
                this.images = [];
            },
            uploadImage: function() {
                console.log(this.images);
//                return false;
                var obj = {};
                obj.images=this.images
                $.ajax({
                    type: 'post',
                    url: "{:url('index/vuedemo/save')}",
                    data: obj,
                    dataType: "json",
                    success: function(data) {
                        if(data.status){
                            alert(data.msg);
                            return false;
                        }else{
                            alert(data.msg);
                            return false;
                        }
                    }
                });
            }
        }
    })
</script>
</body>
</html>